<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>根</div>
    <div>{{ appMessage }} <button @click="appMessage = '你好'">修改message</button></div>
    <first></first>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>
    const stu = {
      name: '张三',
      nickname: this.name
    }
  </script>
  <script>
    Vue
      .createApp({
        data() {
          return {
            appMessage: '这是 App 在 data 中定义的 message',
            appTodos: [],
          }
        },
        methods: {
          todoAdd() {
            this.appTodos.push(54)
          },
        },
        // provide: { // 提供所有后代可访问使用的数据
        //   // message: 'App Message',
        //   todos: [],
        // },
        // provide() { // 编写函数结构，可调用到 data 或 props 属性数据使用
        //   return {
        //     message: this.appMessage,
        //     todos: [],
        //   }
        // },

        provide() { // 编写函数结构，可调用到 data 或 props 属性数据使用
          return {
            // 可显式调用 Vue.computed() 方法，使提供的数据在后代组件中保持响应性
            message: Vue.computed(() => this.appMessage),
            todos: Vue.computed(() => this.appTodos),
            add: this.todoAdd
          }
        },
      })
      .component('first', {
        template: `<div>第一层<second></second></div>`,
      })
      .component('second', {
        template: `<div>第二层<third></third></div>`,
      })
      .component('third', {
        template: `<div>
          第三层
          共享到的根数据是: {{ message }}，数组长度: {{ todos.length }}
          <fourth></fourth>
        </div>`,
        inject: ['message', 'todos'], // 注入在祖先组件中提供可访问的数据
      })
      .component('fourth', {
        template: `
          <div>第四层</div>
          <button @click="add">使用祖先节点中共享的方法</button>
        `,
        inject: ['add'],
      })
      .mount('#app')
  </script>
</body>
</html>